<template>
  <div>
    <alert v-model="alert.show" :title="alert.title"> {{alert.msg}}</alert>
    <ul class="user-form" :data="user.videoPath" >
      <li><span class="hye4gjm">编号：</span><span>{{user.code}}</span></li>
      <li><span class="hye4gjm">昵称：</span><span>{{user.nickname}}</span></li>
      <li><span class="hye4gjm">参赛宣言：</span><span>{{user.declaration}}</span></li>
      <li @click.passive="openVideo" ><Myvideo v-if="user.videoPath" :videoUrl="showVideo()" :showDailog="showDailog" @changeDialog="getStatus"/></li>
      <li>参赛视频</li>
      <li><span class="hye4gjm">学校：</span><span>{{user.universityName}}</span></li>
      <li><span class="hye4gjm">院系：</span><span>{{user.department}}</span></li>
      <li><span class="hye4gjm">地市：</span><span>{{user.cityName}}</span></li>
    </ul>
  </div>
</template>
<script>
import Myvideo from '@/components/com/Myvideo';
import { Alert } from 'vux'
export default {
  components: { Myvideo, Alert },
  props: {
    user: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // pathUrl: 'http://118.212.184.170/wxjx/file',
      pathUrl: '',
      videoPath: this.pathUrl + this.user.videoPath,
      showDailog: false,
      alert: {
        show: false,
        title: '',
        msg: ''
      }
    }
  },
  watch: {
    showDailog(val) {
      return val;
    }
  },
  methods: {
    //显示视频
    openVideo() {
      console.log(this.user.videoPath);
      if (!this.user.videoPath) {
        // this.$emit('changeVideo', true);
        this.alert = {
          show: true,
          title: '提示',
          msg: '当前参赛用户没有上传视频'
        }
      } else {
        this.showDailog = true;
      }
    },
    showVideo() {
      this.noshow = false;
      this.videoPath = this.pathUrl + this.user.videoPath;
      return this.videoPath;
    },
    getStatus(e) {
      console.log(e);
      this.showDailog = e;
    }
  },
}
</script>
<style lang="less" >
.none {
  display: none;
}
.user-form {
  width: 580px;
  margin: 0 auto;
  li {
    padding: 5px 50px;
    display: flex;
    span:first-child {
      // font-weight: bold;
      color: #000;
    }
  }
  li:nth-child(1) {
    span:nth-child(2) {
      color: #ff2424;
    }
  }
  li:nth-child(2) {
  }
  li:nth-child(4) {
    margin: 0 auto;
    width: 246px;
    min-height: 161px;
    background: url("../../assets/img/video.png") no-repeat;
    background-size: 246px 161px;
  }
  li:nth-child(5) {
    justify-content: center;
  }
  li:nth-child(6) {
    justify-content: flex-start;
  }
  li:nth-child(7) {
    justify-content: flex-start;
  }
  li:nth-child(8) {
    justify-content: flex-start;
  }
}
</style>
